<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .info1 {
            width: 300px;
            height: 200px;
            background: red;
        }
        
        #text2 {
            width: 300px;
            height: 200px;
            background: yellow;
        }
        
        .s1 {
            width: 300px;
            height: 200px;
            border: 1px solid blue;
        }
        
        nav {
            width: 300px;
            height: 200px;
            border: 1px solid green;
        }
    </style>
</head>

<body>
    <div id="test1" class="info1">这里是查询选择器</div>
    <p id="text2">这里是<b>一个段落</b></p>
    <nav>这里是导航</nav>
    <section class="s1">这里是内容部分1</section>
    <section class="s1">这里是内容部分2</section>
    <section class="s1">这里是内容部分3</section>
    <input type="text" placeholder="文本输入框" value="aaa" name="ipt">
    <img id="pic" src="liudehua.webp" alt="刘德华">
</body>

</html>
<script>
    let ran = Math.floor(Math.random() * (4 - 0 + 1)) + 0;
    let picArr = ['liudehua.webp', 'dengziqi.webp', 'wujing.webp', 'guanxiaotong.webp']

    document.querySelector("#pic").src = picArr[ran];

    // alert(document.querySelector("#text2").innerHTML);
    // document.querySelector("section");
    // document.querySelectorAll("section")[0];
    // alert(document.getElementById("test1"));
    // alert(document.getElementsByClassName("s1")[2]);
    // alert(document.getElementsByTagName("nav")[0]);
    // alert(document.getElementsByName("ipt")[0]);

    // alert("hello world");
    // document.write("hello world");
    // console.log("hello world");
    document.write("陆梓峰 24510206097");
</script>